.badges-inline {
  display:flex; gap:12px; flex-wrap:wrap; margin:12px 0 8px; padding:0; list-style:none;
}
.badges-inline li {
  font-size:12px; line-height:1; padding:6px 10px; border-radius:999px;
  background:#fff6e1; /* nhẹ nhàng theo palette vàng/nâu của bạn */
  border:1px solid #f0d289;
}
.badges-inline li:hover{
  background:#fff2d6;
  border-color:#e9b838;
  box-shadow:0 6px 14px rgba(201,151,23,0.18);
}

.theme-bullets { margin:10px 0 0; padding-left:18px; }
.theme-bullets li { margin:4px 0; }

.btn-group-gap { margin-top:16px; }

.features-grid {
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px; margin:16px 0 6px;
}
.feature-item {
  background:#fff; border:1px solid #eee; border-radius:12px; padding:12px;
}
.feature-item strong { display:block; font-size:14px; }
.feature-item span { font-size:12px; color:#666; }

/* Mobile tweaks */
@media (max-width: 991px){
  .features-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================
Section1: Theme START
=============================*/
.theme {
  padding-top: 170px;
  padding-bottom: 30px;
  position: relative;
}

.theme .container {
  display: flex;
  justify-content: center;
}

.blackText {
  background: black;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-title h1 {
  width: 100%;
}

.theme-title-1 {
  width: 100%;
  color: #775628;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: calc(100% + 4px);
}

.theme-sub-title {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.theme-1 {
  border: none;
  padding: 8px 30px 8px 30px;
  background: linear-gradient(85deg, #775628 0%, #c07f00 35%, #ffd95a 71%, #fff7d4 100%);
  border-radius: 40px;
  color: white !important;
  margin-right: 40px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.theme-1:hover,
.theme-1:focus,
.theme-1:active {
  outline: none;
  border: solid 3px transparent;
  padding: 5px 27px 5px 27px;
  background-image: linear-gradient(90deg, rgba(119, 86, 40, 0.35) 0%, rgba(192, 127, 0, 0.35) 35%, rgba(255, 217, 90, 0.35) 71%, rgba(255, 247, 212, 0.35) 100%), linear-gradient(90deg, #775628 0%, #c07f00 35%, #ffd95a 71%, #fff7d4 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 2px 1000px 1px rgba(255, 255, 255, 0.95) inset;
  color: #775628 !important;
  outline: none;  
}

.theme-2 {
  border: none;
  margin-right: 0px;
  background: var(--gra2);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-2:hover,
.theme-2:focus,
.theme-2:active {
  outline: none;
}

img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}

.data-img {
  width: 100%;
}

@media (max-width: 1200px) {
  .theme-title-1 {
    margin-top: 10px;
  }
}

@media (max-width: 991px) {
  .theme {
    padding-top: 120px;
  }

  .theme-title-1 {
    margin-top: 10px;
  }

  .theme-sub-title {
    margin-top: 15px;
  }
}
/* ================================
Section1: Theme END
=======================================*/

.bgr {
  z-index: -1;
  position: absolute;
}

.position-1 {
  top: 15%;
  opacity: 0.5;
}

.position-2 {
  top: 170%;
}

@media (width < 1200px) {
  .bposition-1 {
    top: 20%;
  }
}

@media (max-width: 991px) {
  .bgr {
    display: none;
  }
}

/*=====================================
 Section2: Reason START
 ===========================================*/
.advantage {
  margin-top: 10%;
}

.advantage-title h2{
  background: var(--gra1);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.advantage-text {
  color: #fff;
  text-align: justify;
}

.ad-bor {
  background: var(--gra7);
  border-radius: 55px;
  padding-top: 5%;
  padding-bottom: 100px;
  padding-left: 30px;
  padding-right: 30px;
}

.advantage-border {
  border-radius: 55px;
  margin-top: 2%;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 2%;
}

.card {
  display: inline-block;
  border-radius: 25px;
  border: 4px solid transparent;
  background-image: linear-gradient(90deg, rgba(119, 86, 40, 0.35) 0%, rgba(192, 127, 0, 0.35) 35%, rgba(255, 217, 90, 0.35) 71%, rgba(255, 247, 212, 0.35) 100%), linear-gradient(180deg, #775628 7.75%, #C07F00 53.1%, #FFD95A 99.75%, #FFF7D4 137.32%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 4px 1000px 1px #fff inset;
  padding: 15px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  text-align: center;
}

.advantage hr {
  border: none;
  height: 5px;
  background: repeating-linear-gradient(to right,
      transparent,
      transparent 10px,
      rgb(255, 255, 255) 10px,
      rgb(255, 255, 255) 30px);
  margin-top: -100px;
}

@media (max-width: 991px) {
  .card {
    margin-top: 20px;
    height: 230px;
  }

  .advantage-border {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .card {
    padding: 10px;
  }

  .advantage-border {
    margin-top: 0;
  }
}

@media (max-width: 576px) {
  .card {
    height: 100px;
  }

  .advantage hr {
    margin-top: 20px;
  }

  .ad-bor {
    padding-bottom: 10px;
  }
}

/* ================================
Section3: using START -IMG
===================================*/
.using {
  margin-top: 10%;
}

/* =====================================
Section3: using END
=======================================*/

/* ======================================
Section2: Reason START
===========================================*/
.reason {
  margin-top: 10%;
}

.title {
  background: var(--gra2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0px;
  margin-top: -10px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 2%;
}

.reason-cont {
  margin-top: 0px;
}

.reason-text {
  text-align: center;
}

.reason-border {
  backdrop-filter: blur(150px);
  border-radius: 55px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.card-body {
  padding: 0px;
}

.card-slider-3 {
  width: 90%;
  margin-top: 30px;
  margin-bottom: 80px;
  margin-left: 5%;
}

.card-1,
.card-2,
.card-3,
.card-4,
.card-5 {
  border-radius: 15px;
  height: 320px;
  outline: none;
  border: solid 5px transparent;
  padding: 5px 27px 5px 27px;
  background-image: linear-gradient(180deg, rgba(119, 86, 40, 0.85) 7.75%, rgba(192, 127, 0, 0.85) 53.1%, rgba(255, 217, 90, 0.85) 99.75%, rgba(255, 247, 212, 0.85) 137.32%), linear-gradient(180deg, rgba(119, 86, 40, 0.85) 7.75%, rgba(192, 127, 0, 0.85) 53.1%, rgba(255, 217, 90, 0.85) 99.75%, rgba(255, 247, 212, 0.85) 137.32%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 2px 1000px 1px rgba(255, 255, 255, 0.95) inset;
  outline: none; 
}

.card-title h3 {
  font-family: 'Inter';
  text-align: center;
  color: #775628;
  margin-top: 20px;
  font-size: calc(100%-2px);
}

.card-text {
  font-family: 'Inter';
  margin-top: 16px;
  font-size: calc(100%-2px);
  text-align: center;
}

.custom-prev,
.custom-next {
  background: var(--gra2); 
  color: #fff; 
  border-radius: 50%; 
  display: inline-block;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  position: absolute;
  z-index: 1;
  outline: none;
  padding: 6px 10px;
}

.custom-prev {
  top: 50%;
  left: -30px;
}

.custom-next {
  top: 50%;
  right: -30px;
}

.custom-prev:hover,
.custom-next:hover,
.custom-prev:focus,
.custom-next:focus,
.custom-prev:active,
.custom-next:active {
  outline: none;
  border: none;
}

@media (max-width: 1600px) {
  .card-1,
  .card-2,
  .card-3,
  .card-4,
  .card-5 {
    height: 270px;
  }
}

@media (max-width: 1200px) {
  .reason-border {
    width: 100%;
    margin-left: 0;
  }

  .card-title h3 {
    margin-top: 20px;
  }
}

@media (max-width: 991px) {
  .reason-text {
    margin-top: 5px;
  }

  .card-title h3 {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .reason-border {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .reason-text {
    margin-top: 10px;
  }

  .card-title h3 {
    margin-top: 30px;
  }
}

/* ===========================================
Section2: Reason END
================================================*/


/* ====================================
Section4: call-to-action
=======================================*/
.call-to-action {
  margin-top: 7%;
  padding-top: 5%;
  padding-bottom: 5%;
}

.action-quote h2 {
  text-align: center;
  background: var(--gra2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.action-text {
  text-align: center;
  margin-bottom: 40px;
}

.cta-cont {
  margin-top: 20px;
}

.cta-text {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.750316px;
  color: #0F0B33;
  text-decoration: none;
  background-color: transparent;
}

.cta-text:hover {
  color: #775628;
  text-decoration: none;
}

.cta-icon:hover {
  opacity: 0.7;
}

@media (max-width: 1200px) {
  .action-quote {
    font-size: 36px;
    padding: 0px 25% 10px 25%;
  }
}

@media (max-width: 991px) {
  .action-quote {
    font-size: 30px;
    padding: 0px 20% 10px 20%;
    line-height: 48px;
  }

  .cta-text {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .action-quote {
    font-size: 28px;
    padding: 0px 10% 10px 10%;
    line-height: 42px;
  }

  .cta-text {
    font-size: 14px;
  }
}

@media (max-width: 530px) {
  .cta-text {
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .action-quote {
    font-size: 20px;
    padding: 0px 0 10px 0;
    line-height: 34px;
  }

  .action-text {
    font-size: 12px;
  }

  .cta-text {
    font-size: 10px;
    line-height: 16px;
  }
}

@media (max-width: 400px) {
  .action-quote {
    font-size: 16px;
    padding: 0px 0 10px 0;
    line-height: 28px;
  }

  .action-text {
    font-size: 10px;
    margin-bottom: 20px;
  }

  .cta-text {
    font-size: 8px;
    line-height: 10px;
  }
}